import { colorStr, getQueryParams } from '@/utils/utils';
import { useHover } from 'ahooks';
import { Avatar, message } from 'antd';
import { history } from 'umi';
import styles from './index.less';

interface Props {
  color: string;
  thisRoute: string;
}

const RightFixed: React.FC<Props> = ({ color, thisRoute }) => {
  const qs = getQueryParams();
  let isNotLogin = !localStorage.getItem('qs');
  const isHoveringOne = useHover(() => document.getElementById('hover-divOne'));
  const isHoveringTwo = useHover(() => document.getElementById('hover-divTwo'));
  const svgTop: React.CSSProperties = {
    height: '26px',
    marginBottom: 8,
    color: color,
    textAlign: 'center',
  };

  return (
    <div
      className={styles.fixedBtn}
      style={{
        background: colorStr(6),
      }}
    >
      <div style={{ marginBottom: 20 }} className={styles.hoverBoxs}>
        <div className={styles.imgTop}>
          <img src={require('@/assets/images/账号.svg')} alt={'加载失败'} style={svgTop} />
          <div>账号</div>
        </div>
        <div className={styles.fixedRight}>
          <div className={styles.idInformation} style={{ border: `1px solid ${color}` }}>
            <Avatar
              size={64}
              shape="square"
              src={`http://localhost:8090/dyh/upload_images/user/${qs.avatar}`}
              style={{
                marginTop: 15,
                cursor: 'context-menu',
              }}
            />
            <div style={{ marginTop: 10, fontWeight: 600, color: '#333' }}>
              Hi！
              {isNotLogin ? (
                <>
                  &nbsp;请
                  <span
                    style={{ color: color, cursor: 'pointer' }}
                    onClick={() => {
                      history.push('/login&register');
                    }}
                  >
                    登录
                  </span>
                </>
              ) : (
                qs.nickname
              )}
            </div>
            <div className={styles.changeShop}>
              {qs.role !== '3' && (
                <div
                  id="hover-divTwo"
                  onClick={() => {
                    if (thisRoute === '我的订单') {
                      message.error('当前已在订单页面！');
                    } else {
                      isNotLogin
                        ? history.push('/login&register')
                        : history.push({
                            pathname: '/streamPage',
                            query: { tableState: '0', lastRoute: thisRoute },
                          });
                    }
                  }}
                  style={{
                    color: `${isHoveringTwo ? color : '#333'}`,
                    margin: 20,
                    cursor: 'pointer',
                  }}
                >
                  <div className={styles.imgBuy}>
                    <img
                      src={require('@/assets/images/订单.svg')}
                      alt={'加载失败'}
                      style={svgTop}
                    />
                  </div>
                  <div>我的订单</div>
                </div>
              )}

              <div
                id="hover-divOne"
                onClick={() => {
                  if (thisRoute === '养生小专栏') {
                    message.error('当前已在养生资讯页面！');
                  } else {
                    isNotLogin
                      ? history.push('/login&register')
                      : history.push({
                          pathname: '/advice',
                          query: { lastRoute: thisRoute },
                        });
                  }
                }}
                style={{
                  color: `${isHoveringOne ? color : '#333'}`,
                  margin: '20px 30px',
                  cursor: 'pointer',
                }}
              >
                <div className={styles.imgBuy}>
                  <img src={require('@/assets/images/资讯.svg')} alt={'加载失败'} style={svgTop} />
                </div>
                <div> 资讯</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {qs.role !== '3' && (
        <div style={{ backgroundColor: '#262626', color: 'white' }} className={styles.hoverBoxs}>
          <div
            className={styles.imgBottom}
            onClick={() => {
              if (thisRoute === '购物车') {
                message.error('当前已在购物车页面！');
              } else {
                isNotLogin
                  ? history.push('/login&register')
                  : history.push({
                      pathname: '/shopCar',
                      query: { lastRoute: thisRoute },
                    });
              }
            }}
          >
            <img src={require('@/assets/images/购物车.svg')} alt={'加载失败'} style={svgTop} />
            <div className={styles.buyText}>购物车</div>
          </div>
        </div>
      )}
    </div>
  );
};
export default RightFixed;
